<template>
    <div>
        <h2>扩展组件</h2>
        <h3>data数据</h3>
        <div>{{msg}}</div>
        <h3>计算属性</h3>
        <div>{{cptMsg}}</div>
        <h3>事件</h3>
        <button @click="show(12,'bmw')">事件</button>
        <h3>ref</h3>
        <div ref="box">box</div>
    </div>
</template> 
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
   data(){
       return {
           msg: '扩展组件中的data'
       }
   },
   props: {
       p1: {
           type: String,
           default: '默认值',
           required: false,
           validator: (val:string)=>val.length>2
       }
   },
   computed: {
       cptMsg():string{
           return '计算后的msg'+this.msg
       }
   },
   methods: {
       show(arg1: number, arg2: string):void{
           alert('扩展式组件中的实例方法' + arg1 + arg2)
       }
   },
   mounted() {
        console.log('extend component mounted');
        (this.$refs.box as HTMLElement).style.background = 'green'
   },
   watch: {
    msg(newValue: string, oldValue: string):void{
        console.log('extend component msg变化', newValue, oldValue)
    }
   }
})
</script>
   